 <template>
  <div class="menu">
    <!-- <div class="img">
      <img
        title="111111111"
        :style="{
          margin: '10px 6px',
          width: iscollapse ? '50px' : '150px',
          height: '50px',
        }"
        src="../assets/images/车次管理/u339.svg"
      />
      <span :style="{ left: iscollapse ? '15px' : '33px' }">
        {{ iscollapse ? "logo" : "logo票务系统" }}
      </span>
    </div> -->
    <el-tag
      class="logo"
      type="orange"
      size="large"
      @click="$router.push('/logo')"
      :style="{ padding: iscollapse ? '2px 5px' : '3px 10px' }"
    >
      {{ iscollapse ? "logo" : "logo 票务系统" }}
    </el-tag>
    <el-menu
      active-text-color="#a0cfff"
      background-color="#545c64"
      class="el-menu-vertical-demo"
      :default-active="$route.path"
      :text-color="type === true ? '#fff' : '#fff'"
      :collapse="iscollapse"
      router
    >
      <el-sub-menu index="/user">
        <template #title>
          <el-icon><location /></el-icon>
          <span>系统管理</span>
        </template>
        <el-menu-item-group>
          <template #title><span>系统</span></template>
          <el-menu-item index="/user">用户管理</el-menu-item>
          <el-menu-item index="/role">角色列表</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
      <!--  路由 -->
      <el-menu-item v-for="(v, i) in routerlist" :key="i" :index="v.path">
        <el-icon><component :is="v.icon" /></el-icon>
        <template #title>{{ v.title }} </template>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  props: {
    type: Boolean,
    iscollapse: {
      type: Boolean,
      default: false,
    },
    routerlist: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      url: require("../assets/logo.png"),
    };
  }, 
};
</script>
 
<style scoped lang='scss' >
.img {
  position: relative;
  height: 55px;
  span {
    position: absolute;
    bottom: 12px;
    transition: 0.8s;
  }
}
.el-menu-vertical-demo {
  border: none;
  display: inline;
  height: 100vh;
}
.logo {
  cursor: pointer;
  margin-top: 10px;
  transition: 0.7s;
  margin-bottom: 10px;
}
</style>